﻿@{
    ViewData["Title"] = "TablesDesign";
}

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>

            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="@Url.Action("Index", "Dashboard")">Dashboard</a></li>
                    <li>
                        <span>Tables</span>
                    </li>
                    <li class="active">
                        <span>Tables design</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                Tables design
            </h2>
            <small>Examples of various designs of tables.</small>
        </div>
    </div>
</div>

<div class="content animate-panel">

    <div class="row">
        <div class="col-lg-8">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    This is a basic table design
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table cellpadding="1" cellspacing="1" class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Street Address</th>
                                    <th>City</th>
                                    <th>Country</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Abraham</td>
                                    <td>076 9477 4896</td>
                                    <td>294-318 Duis Ave</td>
                                    <td>Vosselaar</td>
                                    <td>Belgium</td>
                                </tr>
                                <tr>
                                    <td>Phelan</td>
                                    <td>0500 034548</td>
                                    <td>680-1097 Mi Rd.</td>
                                    <td>Lavoir</td>
                                    <td>Pakistan</td>
                                </tr>
                                <tr>
                                    <td>Raya</td>
                                    <td>(01315) 27698</td>
                                    <td>Ap #289-8161 In Avenue</td>
                                    <td>Santomenna</td>
                                    <td>Burkina Faso</td>
                                </tr>
                                <tr>
                                    <td>Azalia</td>
                                    <td>0500 854198</td>
                                    <td>226-4861 Augue. St.</td>
                                    <td>Newtown</td>
                                    <td>Christmas Island</td>
                                </tr>
                                <tr>
                                    <td>Garth</td>
                                    <td>(01662) 59083</td>
                                    <td>3219 Elit Avenue</td>
                                    <td>Ternitz</td>
                                    <td>Saint Martin</td>
                                </tr>
                                <tr>
                                    <td>Selma</td>
                                    <td>0877 118 6905</td>
                                    <td>P.O. Box 410, 7331 Nec, St.</td>
                                    <td>Glenrothes</td>
                                    <td>Korea, North</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="panel-footer">
                    Table - 6 rows
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    This is a condensed basic table
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table cellpadding="1" cellspacing="1" class="table table-condensed">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Street</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Henry</td>
                                    <td>Purus Gravida Sagittis Limited</td>
                                    <td>055 1753 4032</td>
                                </tr>
                                <tr>
                                    <td>Shelly</td>
                                    <td>Posuere Enim Inc.</td>
                                    <td>0313 143 2317</td>
                                </tr>
                                <tr>
                                    <td>Edan</td>
                                    <td>Quisque Imperdiet Company</td>
                                    <td>076 1743 8649</td>
                                </tr>
                                <tr>
                                    <td>Sophia</td>
                                    <td>Quam Incorporated</td>
                                    <td>0863 826 7513</td>
                                </tr>
                                <tr>
                                    <td>Griffith</td>
                                    <td>Tempor Erat Corp.</td>
                                    <td>0845 46 45</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="panel-footer">
                    Table - 5 rows
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    This is a striped table design
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table cellpadding="1" cellspacing="1" class="table table-condensed table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Street</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Henry</td>
                                    <td>Purus Gravida Sagittis Limited</td>
                                    <td>055 1753 4032</td>
                                </tr>
                                <tr>
                                    <td>Shelly</td>
                                    <td>Posuere Enim Inc.</td>
                                    <td>0313 143 2317</td>
                                </tr>
                                <tr>
                                    <td>Edan</td>
                                    <td>Quisque Imperdiet Company</td>
                                    <td>076 1743 8649</td>
                                </tr>
                                <tr>
                                    <td>Sophia</td>
                                    <td>Quam Incorporated</td>
                                    <td>0863 826 7513</td>
                                </tr>
                                <tr>
                                    <td>Griffith</td>
                                    <td>Tempor Erat Corp.</td>
                                    <td>0845 46 45</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="panel-footer">
                    Table - 5 rows
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    This is a bordered striped basic table
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table cellpadding="1" cellspacing="1" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Street Address</th>
                                    <th>City</th>
                                    <th>Country</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Abraham</td>
                                    <td>076 9477 4896</td>
                                    <td>294-318 Duis Ave</td>
                                    <td>Vosselaar</td>
                                    <td>Belgium</td>
                                </tr>
                                <tr>
                                    <td>Phelan</td>
                                    <td>0500 034548</td>
                                    <td>680-1097 Mi Rd.</td>
                                    <td>Lavoir</td>
                                    <td>Pakistan</td>
                                </tr>
                                <tr>
                                    <td>Raya</td>
                                    <td>(01315) 27698</td>
                                    <td>Ap #289-8161 In Avenue</td>
                                    <td>Santomenna</td>
                                    <td>Burkina Faso</td>
                                </tr>
                                <tr>
                                    <td>Azalia</td>
                                    <td>0500 854198</td>
                                    <td>226-4861 Augue. St.</td>
                                    <td>Newtown</td>
                                    <td>Christmas Island</td>
                                </tr>
                                <tr>
                                    <td>Garth</td>
                                    <td>(01662) 59083</td>
                                    <td>3219 Elit Avenue</td>
                                    <td>Ternitz</td>
                                    <td>Saint Martin</td>
                                </tr>
                                <tr>
                                    <td>Selma</td>
                                    <td>0877 118 6905</td>
                                    <td>P.O. Box 410, 7331 Nec, St.</td>
                                    <td>Glenrothes</td>
                                    <td>Korea, North</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="panel-footer">
                    Table - 6 rows
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    This is a bordered striped and responsive table
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table cellpadding="1" cellspacing="1" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Street Address</th>
                                    <th>City</th>
                                    <th>Country</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Abraham</td>
                                    <td>076 9477 4896</td>
                                    <td>294-318 Duis Ave</td>
                                    <td>Vosselaar</td>
                                    <td>Belgium</td>
                                </tr>
                                <tr>
                                    <td>Phelan</td>
                                    <td>0500 034548</td>
                                    <td>680-1097 Mi Rd.</td>
                                    <td>Lavoir</td>
                                    <td>Pakistan</td>
                                </tr>
                                <tr>
                                    <td>Raya</td>
                                    <td>(01315) 27698</td>
                                    <td>Ap #289-8161 In Avenue</td>
                                    <td>Santomenna</td>
                                    <td>Burkina Faso</td>
                                </tr>
                                <tr>
                                    <td>Azalia</td>
                                    <td>0500 854198</td>
                                    <td>226-4861 Augue. St.</td>
                                    <td>Newtown</td>
                                    <td>Christmas Island</td>
                                </tr>
                                <tr>
                                    <td>Garth</td>
                                    <td>(01662) 59083</td>
                                    <td>3219 Elit Avenue</td>
                                    <td>Ternitz</td>
                                    <td>Saint Martin</td>
                                </tr>
                                <tr>
                                    <td>Selma</td>
                                    <td>0877 118 6905</td>
                                    <td>P.O. Box 410, 7331 Nec, St.</td>
                                    <td>Glenrothes</td>
                                    <td>Korea, North</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="panel-footer">
                    Table - 6 rows
                </div>
            </div>
        </div>
    </div>

</div>
